Skip to main content

Using the DOM API (with graphical text: Canvas, SVG, or image file)

Using canvas elements​

HTML provides the canvas element for building raster-based images. First build a canvas for holding image pixel information.

var canvas = document.createElement('canvas'); 
canvas.width = 500;
canvas.height = 250;

Then select a context for the canvas, in this case two-dimensional:

var ctx = canvas.getContext('2d');

Then set properties related to the text:

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);

Then insert the canvas element into the page to take effect:

document.body.appendChild(canvas);

Using SVG​

SVG is for building scalable vector-based graphics and can be used within HTML. First create an SVG element container with dimensions:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
svg.width = 500;
svg.height = 50;

Then build a text element with the desired positioning and font characteristics:

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); 
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';

Then add the actual text to display to the textelement:

text.textContent = 'Hello world!';

Finally add the text element to our svg container and add the svg container element to the HTML document:

svg.appendChild(text);
document.body.appendChild(svg);

Image file​

If you already have an image file containing the desired text and have it placed on a server, you can add the URL of the image and then add the image to the document as follows:

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg'; 
document.body.appendChild(img);